<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      :mode="mode"
      @input="update"
    ></form-title-setting>
    <!-- end 标题 -->
    <p class="form-setting-separator-tips">{{$t('common.form.preview.separator.des1')}}</p>
    <div class="form-setting-separator-show">
      <img :src="separatorShowImage" class="unselect" :alt="$t('common.form.preview.separator.des2')" width="100%"/>
    </div>
    <!--如果分割线在表单的最后，那么在生成表单和展示表单数据时该字段将会被忽略。-->
    
    <!-- 是否对客户可见 -->
    <form-visible-customer-setting :field="field" @input="updateCustomer" v-if="isShowVisibleCustomer" form-control-type="separator"></form-visible-customer-setting>
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';
import { getLocalesOssUrl } from '@src/util/assets'
const  separatorShowImage = getLocalesOssUrl('/form/separatorShow.png')// img-checked
export default {
  name: 'form-separator-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data(){
    return {
      separatorShowImage
    }
  },
  methods: {
    update(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.$emit('input', {value, prop})
    },
    updateCustomer (value, prop) {
      this.$emit('input', { value, prop })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-setting-panel{
  position: relative;
  .form-setting-separator-tips{
    margin-bottom: 13px;
    font-size: 12px;
    color: #666666;
    line-height: 17px;
  }
  .form-setting-separator-show{
    // position: absolute;
    // transform: translateX(-12px);
    width: 100%;
    padding: 13px 11px;
    background: #FAFAFA;
    margin-bottom: 20px;
  }
}

.unselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  user-select: none;
}
</style>
